<script setup lang="ts">
	import { ref, unref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { getOrderListApi } from '@/package_tms/api/Home'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	interface RouteParams {
		store : string,
		store_id : string
		order_status : string
	}
	const routeParams = ref<RouteParams>({
		store: '',
		store_id: '',
		order_status: ''
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
	})

	const paging = ref<ZPagingInstance>()
	const useCURD = () => {
		const dataList = ref([])
		const getList : ZPagingEvent.Query = async (page : number, limit : number) => {
			const params = { page, limit, order_status: unref(routeParams).order_status, store_id: unref(routeParams).store_id }
			try {
				const res = await getOrderListApi(params)
				paging.value?.complete([...res.data.data])

			} catch (err) {
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			dataList,
			getList,
			searchAction,

		}
	}
	const { dataList, getList, searchAction } = useCURD()

	// 查看详情
	const toStoreDetail = (item) => {
		route({
			url: 'package_tms/pages/Detail/productDetails',
			params: {
				order_id: item.related.id,
				name: routeParams.value.store
			}
		})
	}

	// 签收收款
	const paymentsDetail = (item) => {
		// const params = {
		// 	store_id: routeParams.value.store_id,
		// 	order_status: routeParams.value.order_status,
		// 	name: routeParams.value.store,
		// 	order_amount: item.order_amount,
		// 	order_id: item.related.id,
		// 	receive_type: item.receive_type,
		// 	// yc_money: item.yc_money,
		// 	detail: JSON.stringify(item.related.detail)
		// }
		// console.log(item, '009')
		route({
			url: 'package_tms/pages/Detail/paymentsData',
			params: {
				store_id: routeParams.value.store_id,
				order_status: routeParams.value.order_status,
				name: routeParams.value.store,
				order_amount: item.related.detail.reduce((cur, item) => cur + Number(item.total_price), 0),
				id: item.related.id,
				// receive_type: item.receive_type,
				// yc_money: item.yc_money,
				detail: JSON.stringify(item.related.detail),
				warehouse_id:item.related.warehouse_id
			}
		})
	}

	// 签收回款
	const returnDetail = (item) => {
		route({
			url: 'package_tms/pages/Detail/returnWarehouse',
			params: {
				store_id: routeParams.value.store_id,
				order_status: routeParams.value.order_status,
				name: routeParams.value.store,
				order_amount: item.related.detail.reduce((cur, item) => cur + Number(item.total_price), 0),
				id: item.related.id,
				receive_type: item.receive_type,
				yc_money: item.yc_money,
				detail: JSON.stringify(item.related.detail)
			}
		})
	}
	// 返回
	const leftClick = () => {
		uni.redirectTo({
			url: `/package_tms/pages/Home/index`
		})
	}
	// 手机物理返回
	const isShow = ref(true)
	const beforeleave = () => {
		isShow.value = false
		uni.redirectTo({
			url: `/package_tms/pages/Home/index`
		})
	}
</script>

<template>
	<z-paging ref="paging" v-model="dataList" @query="getList" bg-color="rgba(242, 243, 245, 1)">
		<template #top>
			<up-navbar :title="routeParams.store" placeholder @leftClick="leftClick"></up-navbar>
			<view v-if="isShow">
				<page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container>
			</view>
		</template>
		<view class="content-box" v-for="(item,index) in dataList" :key="index">
			<view class="box-header">
				<view class="header">
					<view class="header-name">订单：{{item.related.no}}</view>
					<view class="header-img">
						<image style="width: 106rpx;height: 60rpx;" src="/package_tms/static/icon/icon7.png"></image>
					</view>
				</view>
				<view class="footer-foot">
					<view class="foot-name">{{item.dealer?.name}}</view>
					<view class="foot-name1">{{item.related.order_type == 1 ? '销售单' : '回库单'}}</view>
					<view class="foot-text">总价：<text style="color: rgba(245, 99, 81, 1);">{{item?.related.detail.reduce((cur, item) => cur + Number(item.total_price), 0).toFixed(2)}}</text>
					</view>
				</view>
			</view>
			<view class="list-goods">
				<view class="list">
					<up-row justify="space-between">
						<up-col span="4">
							<up-icon label="商品名称" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
							</up-icon>
						</up-col>
						<up-col span="2">
							<up-icon label="单价" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
							</up-icon>
						</up-col>
						<up-col span="2">
							<up-icon label="规格" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
							</up-icon>
						</up-col>
						<up-col span="2">
							<up-icon label="订单数" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
							</up-icon>
						</up-col>
						<up-col span="2">
							<up-icon label="签收数" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
							</up-icon>
						</up-col>
					</up-row>
					<block v-for="(val, ind) in item.related.detail" :key="ind">
						<up-row justify="space-between">
							<up-col span="4">
								<view style="display: flex;gap: 3rpx;font-weight: 500;">
									<up-tag style="display: flex;gap: 3rpx;font-weight: 500;" text="赠品" plain
										size="mini" v-if="val.type == '2'"></up-tag>
									<up-text :text="val.goods.goods_name" align="center"></up-text>
								</view>
							</up-col>
							<up-col span="2">
								<up-text :text="val.sale_price" color="rgba(101, 103, 105, 1)" align="center"></up-text>
							</up-col>
							<up-col span="2">
								<up-text :text="val.goods.spec[0].unit_name" color="rgba(101, 103, 105, 1)" align="center"></up-text>
							</up-col>
							<up-col span="2">
								<up-text :text="val.num" color="rgba(101, 103, 105, 1)" align="center"></up-text>
							</up-col>
							<up-col span="2">
								<up-text :text="val?.received_number" color="rgba(101, 103, 105, 1)"
									align="center"></up-text>
							</up-col>
						</up-row>
					</block>
					<view class="line"></view>
					<view class="beizhu">备注：<text style="color: rgba(2, 14, 36, 1);">{{item.related.remark}}</text>
					</view>
					<!-- <view class="beizhu" v-if="item.related.status == 4">签收时间：
					<text style="color: rgba(2, 14, 36, 1);">{{item.related.delivery_log?.create_time}}</text>
					</view> -->
					<view style="display: flex;justify-content: space-between;padding: 30rpx;box-sizing: border-box">
						<view style="width: 240rpx;">
							<up-button text="查看详情" :plain="true" :hairline="true" shape="circle"
								@click="toStoreDetail(item)" color="rgba(55, 131, 252, 1)"></up-button>
						</view>
						<view style="width: 240rpx;" v-if="item.related.status == 3 && item.related.order_type == 1">
							<up-button text="签收收款" shape="circle" @click="paymentsDetail(item)"
								color="rgba(55, 131, 252, 1)"></up-button>
						</view>
						<view style="width: 240rpx;" v-if="item.related.status == 3 && item.related.order_type == 2">
							<up-button text="签收回库" shape="circle" @click="returnDetail(item)"
								color="rgba(245, 99, 81, 1)"></up-button>
						</view>
					</view>

				</view>
			</view>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</z-paging>
</template>

<style scoped lang="scss">
	/* 兼容iOS 11.2及以上 */
	.content-box {
		width: 702rpx;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 1);
		margin: 20rpx auto;

		.box-header {
			width: 702rpx;
			height: 132rpx;
			border-radius: 12rpx 12rpx 0rpx 0rpx;
			background: linear-gradient(180deg, rgba(55, 131, 252, 0.15) 0%, rgba(55, 131, 252, 0.02) 100%);

			.header {
				display: flex;
				justify-content: space-between;

				.header-name {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(100, 101, 102, 1);
					margin-top: 30rpx;
					margin-left: 30rpx;
				}

				.header-img {
					width: 106rpx;
					height: 60rpx;
				}
			}

			.footer-foot {
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				margin-left: 30rpx;

				.foot-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(2, 14, 36, 1);
					margin-right: 20rpx;
				}

				.foot-name1 {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(2, 14, 36, 1);
					margin-right: 20rpx;
				}

				.foot-text {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(101, 103, 105, 1);

				}
			}


		}

		.list-goods {
			margin-top: 20rpx;

			.list {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				padding: 10rpx;
				box-sizing: border-box;
			}

			:deep(.u-icon) {
				justify-content: center;
			}

			.line {
				width: 654rpx;
				height: 0rpx;
				margin: 20rpx auto;
				border: 2rpx solid rgba(0, 0, 0, 0.1);
			}

			.beizhu {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(100, 101, 102, 1);
				margin-left: 30rpx;
				margin-bottom: 20rpx;
			}

		}
	}
</style>